<template>
    <rx-dialog @handOk="handOk" @cancel="cancel">
        <a-form style=" margin-top: 20px">

            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.permissType','权限类型')">
                <a-radio-group v-model="localPermission.type" @change="changeType"
                               v-decorator="['type', {rules: [{required: true, message: i18n('form.permissType','权限类型','select')}]}]">
                    <a-radio value="ALL">{{i18n('all','所有人')}}</a-radio>
                    <a-radio value="custom">{{i18n('config','配置')}}</a-radio>
                </a-radio-group>
            </a-form-item>
            <template v-if="showList" v-for="(dataObj, index) in localPermission.typeList">
                <permission-component ref="preview" :dataObj="dataObj"></permission-component>
            </template>
        </a-form>
    </rx-dialog>
</template>
<script>

    import {RxDialog, Dialog, Util} from "@lowcode/jpaas-common-lib";
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import PermissionComponent from "./PermissionComponent";


    export default {
        name: 'InsPortalPermissionEdit',
        components: {
            ACol,
            ARow,
            RxDialog,
            Dialog,
            PermissionComponent
        },
        props: {
            layerid: {
                type: String,
                default: ""
            },
            destroy: {
                type: Function
            },
            /**
             *{
             *    type:"ALL,custom"
             *    typeList:[{
             *      type:"",
             *      name:"",
             *      values:"",
             *      names:"",
             *      }
             *    ]
             *}
             */
            permission: {
                type: Object
            }
        },
        computed: {
            showList() {
                console.info(this.permission.type);
                return this.localPermission.type == "custom";
            }
        },
        data() {
            return {
                localPermission: {},
                labelCol: {span: 6},
                wrapperCol: {span: 18},
            }
        },
        created() {
            this.localPermission = JSON.parse(JSON.stringify(this.permission));
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "formStamp", key);
            },
            changeType() {
                if (this.localPermission.type == "ALL") {
                    for (var i = 0; i < this.localPermission.typeList.length; i++) {
                        let obj = this.localPermission.typeList[i];
                        obj.values = "";
                        obj.names = "";
                    }
                }

            },
            handOk() {
                Util.closeWindow(this, "ok", this.localPermission);
            },
            cancel() {
                Util.closeWindow(this, "cancel");
            }

        }
    }
</script>

<style scoped>
    .tabButton {
        vertical-align: middle;
        margin-left: 10px;
    }
</style>